<template>
  <div>
      <myheader></myheader>
       <!-- 表单盒子 -->
        <div class='form'>
            <van-form validate-first>
            <van-field
                v-model="username"
                name="username"
                label="用户名："
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
                label-align = 'center'
            />
            <van-field
                v-model="password"
                name="password"
                label="密  码："
                placeholder="密码"
                :rules="[{ required: true, message: '密码至少有一个字母或数字 并且大于4位' }]"
                label-align = 'center'
            />
            <a href="http://127.0.0.1:5000/another_user/?method=gitee">
                <img src="../../static/img/mayun.png" alt="加载失败" width="80px">
            </a>
            <a href="http://127.0.0.1:5000/another_user/?method=sina">
               <img src="../../static/img/sina.png" alt="加载失败" width="80px">
            </a>
            <a href="http://127.0.0.1:5000/another_user/?method=ding">
               <img src="../../static/img/dingding.png" alt="加载失败" width="80px">
            </a>
            <div class='findpass'><a href="" @click="Findpass">忘记验证码</a></div>
                
            <van-button square block type="info"  @click="onSubmit">
            登录
            </van-button>
            </van-form>
        </div>     
        <!-- <div style="margin:0 auto;width:600px;">
            <iframe src="http://192.168.43.239:8082/login/" frameborder="0" width="500px;" height="600px;" scrolling = "no"></iframe> 
        </div> -->
  </div>
</template>

<script>
import myheader from  './myheader.vue'
import axios from 'axios'
export default {
    data(){
        return{
            username : "",
            password:''
        }
    },
    components:{
        'myheader':myheader,
    },
    created(){
        this.test()
    },
    methods:{
        test(){
            window.addEventListener('message', function(e) {
            console.log(e.data);
            },false);
        },
        Findpass(){
            if(this.username==''){
                alert('请填写用户名')
                window.location.reload()
            }else{
                this.$router.push({name:'Find_pass',query:{username:this.username}})
            }
        },
        onSubmit(){
            var login_formdata = new FormData()
            login_formdata.append('username',this.username)
            login_formdata.append('password',this.password)
            console.log(this.username)
            axios.post('http://127.0.0.1:5000/user/',login_formdata).then(res=>{
                console.log(res.data)
                alert(res.data.msg)
                if(res.data.code==200){
                    sessionStorage.setItem('uid',res.data.uid)
                    sessionStorage.setItem('username',res.data.username)
                    sessionStorage.setItem('type',res.data.type)
                    sessionStorage.setItem('jwt',res.data.jwt)
                    window.location.href='/'
                }
                
            })
        }
    }
}
</script>

<style>
.form{
    text-align:center;
    margin:0px auto; 
    margin-top: 200px;
    width: 350px;
}
.myfooter{
    position:absolute;
    bottom:0;
    width:100%;
}
.findpass{
    height: 40px;
    text-align: right;
    line-height: 50px;
    font-size: 14px;
    font-weight:510;
}
</style>